<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <div class="business_detail">
    <div class="top">
      <div class="pic">{{ businessData?.name?.slice(0, 1) }}</div>
      <div class="name">{{ businessData?.name }}</div>
      <el-tooltip content="返回"><img :src="back" alt="" @click="goBack" /></el-tooltip>
    </div>
    <div class="map">
      <div class="card_item" v-for="(item, index) in cards" :key="item">
        <div class="title">
          <div>{{ index + 1 }}</div>
          <el-tooltip :content="item.name" placement="top">
            <div>{{ item.name }}</div>
          </el-tooltip>
        </div>
        <div class="content" :id="item.id">
          <div class="database_item" v-for="(el, index) in item.databaseVoList" :id="index + 'el'" :key="el">
            <div class="base_top">
              <div>{{ el.name }}</div>
              <div>
                涉及数据量：<el-link @click="viewDataDetail(el)">{{ el.inventoryCount }}</el-link>
              </div>
            </div>
            <div class="split"></div>
            <div class="bottom">
              <div>
                <span>数据库模式：</span><span>{{ el.databaseSchema }}</span>
              </div>
              <div>
                <span>访问权限：</span><span>{{ el.permissions }}</span>
              </div>
              <div><span>数据格式：</span><span>{{el.databaseFormat}}</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <DataDetail v-if="dataDetailVisible" :dataDetailVisible="dataDetailVisible" :data="booldParams" @handleEvent="handleEvent" />
  </div>
</template>
<script name="BusinessDetail" setup>
import back from '@/assets/images/back.svg';
import DataDetail from './DataDetail.vue';
import { getBusinessAnalysisDetail } from '@/api/metaData/index';
const props = defineProps(['data']);
const emit = defineEmits(['goback']);
const businessData = ref(null);
const cards = ref([]);
const dataDetailVisible = ref(false);
const booldParams = ref({businessId:props?.data?.id,databaseId:''});
//返回
const goBack = () => {
  emit('goback');
};
const handleEvent = () => {
  dataDetailVisible.value = false;
};
const viewDataDetail = (data) => {
  // if (data.inventoryCount === 0) {
  //   return;
  // }
  console.log(data);
  booldParams.value.databaseId = data?.id;
  dataDetailVisible.value = true;
};
onMounted(() => {
  getBusinessAnalysisDetail({ businessId: props?.data?.id }).then((res) => {
    if (res) {
      businessData.value = res?.data;
      cards.value = res?.data?.children || [];
    }
  });
});
</script>
  <style lang="scss" scoped>
.business_detail {
  width: 100%;
  height: calc(100vh - 84px);
  font-size: 12px;
  padding: 10px 20px;
  .top {
    display: flex;
    align-items: center;
    .pic {
      height: 40px;
      width: 40px;
      background: #409eff;
      border-radius: 50%;
      text-align: center;
      line-height: 40px;
      color: #fff;
    }
    .name {
      font-weight: 600;
      margin-left: 10px;
    }
    > img {
      height: 20px;
      width: 20px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
  .map {
    width: 100%;
    height: calc(100% - 60px);
    border: 1px solid #d9d9d9;
    margin-top: 10px;
    display: flex;
    overflow-x: auto;
    border-radius: 8px;
    .card_item {
      height: 100%;
      min-width: 170px;
      margin-right: 10px;
      border: 1px solid #d9d9d9;
      background: #fcf8e9;
      border-radius: 8px;
      position: relative;
      .title {
        width: 100%;
        height: 40px;
        display: flex;
        font-size: 12px;
        align-items: center;
        justify-content: center;
        > div:nth-child(1) {
          height: 20px;
          width: 20px;
          border: 1px solid #d9d9d9;
          border-radius: 4px;
          text-align: center;
          line-height: 20px;
        }
        > div:nth-child(2) {
          margin-left: 4px;
          max-width: 50px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        > div:nth-child(3) {
          margin-left: 4px;
          height: 20px;
          width: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
      .content {
        height: calc(100% - 50px);
        background: #fff;
        margin: 0 10px 10px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
        font-size: 12px;
        .database_item {
          height: 120px;
          width: 120px;
          border: 1px solid #d9d9d9;
          margin: 8px;
          border-radius: 4px;
          position: relative;
          .base_top {
            font-size: 12px;
            padding: 5px;
            > div:nth-child(2) {
              margin-top: 5px;
            }
          }
          .split {
            width: 100%;
            height: 1px;
            background: #d9d9d9;
          }
          .bottom {
            padding: 5px;
            > div:nth-child(2) {
              margin-top: 5px;
            }
            > div:nth-child(3) {
              margin-top: 5px;
            }
            > div {
              > span:nth-child(2) {
                color: #909399;
              }
            }
          }
        }
      }
    }
  }
  :deep(.el-link__inner) {
    font-size: 12px;
    color: #409eff;
  }
}
</style>
  